<template>
    <div>
        <div class="show-pc">
            <div class="menu-container">
                <!-- 显示前7个菜单项 -->
                <div v-for="item in visibleMenuItems" :key="item.key" class="menu-item"
                    :class="{ active: activeKey === item.key }" @click="handleMenuClick(item)"
                    :style="{ color: activeKey === item.key ? 'var(--color-Sel)' : 'inherit' }">
                    {{ item.label }}
                </div>

                <!-- 显示更多按钮 -->
                <div v-if="hasHiddenItems" class="more-button" @mouseenter="showHiddenItems = true"
                    @mouseleave="showHiddenItems = false">
                    ···
                    <!-- 隐藏的菜单项（悬浮显示） -->
                    <div v-show="showHiddenItems" class="hidden-menu-items" style="background-color: var( --color-bg);">
                        <div v-for="item in hiddenMenuItems" :key="item.key" class="menu-item"
                            :class="{ active: activeKey === item.key }" @click="handleMenuClick(item)"
                            :style="{ color: activeKey === item.key ? 'var(--color-Sel)' : 'inherit' }">
                            {{ item.label }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="show-wap">
            <div style="color: var(--color-text);" class="menu-container-wap">
                <!-- 显示前7个菜单项 -->
                <div v-for="item in visibleMenuItemsWap" :key="item.key" :class="{ active: activeKey === item.key }"
                    @click="handleMenuClick(item)"
                    :style="{ color: activeKey === item.key ? 'var(--color-Sel)' : 'inherit' }">
                    {{ item.label }}
                </div>

                <!-- 显示更多按钮 -->
                <div v-if="hasHiddenItemsWap" @click="toggleHiddenItems"
                    style="font-size: 18px; width: auto; cursor: pointer;">
                    ·&nbsp;·&nbsp;·
                </div>
                <!-- 隐藏的菜单项（点击显示） -->
                <div v-if="showHiddenItems" class="hidden-menu-items-wap" @click.stop>
                    <div v-for="item in hiddenMenuItemsWap" :key="item.key" :class="{ active: activeKey === item.key }"
                        @click="handleMenuClick(item)"
                        :style="{ color: activeKey === item.key ? 'var(--color-Sel)' : 'inherit' }"
                        style="margin-top: 6px;">
                        {{ item.label }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, defineProps, defineEmits } from 'vue';
import { useRouter } from 'vue-router';



import { useStore } from '@/store'
const { themeStore } = useStore()
const searchPosition = ref()



watch(() => {
    console.log(themeStore.searcShow.visible, "输出");
    searchPosition.value = themeStore.searcShow.visible
})

const props = defineProps({
    activeKey: {
        type: String,
        default: ''
    }
});

const emits = defineEmits(['menuClick']);

const router = useRouter();

const menuList = ref([
    { key: 'standardPath', label: '小红书返图' },
    { key: 'PandaIPstandard', label: 'BF' },
    { key: 'Pinpushstandard', label: '官媒图' },
    { key: 'Marketingstandards', label: '明星素材' },
    { key: 'Corporateimagestandard', label: '商详页' },
    { key: 'ClassAschedulesetting', label: '门店素材' },
    { key: 'BCclassdesignactivity', label: '设计素材' },
    // { key: 'Specialenterprisedesign', label: '特别企化设计' },
    // { key: 'Mediapublicitydesign', label: '媒体宣传设计' },
    // { key: 'MembershipandCustomerService', label: '会员及客服' },
    // { key: 'NightOleDesign', label: '夜奥莱设计' },
    // { key: 'ConventionalAmericandesign', label: '常规美陈设计' },
    // { key: 'Picturedata', label: '图片资料' },
    // { key: 'Sandboatwhimsy', label: '砂之船奇思妙想' },
    // { key: 'AImap', label: 'AI生图' }
]);

// 控制是否显示隐藏项
const showHiddenItems = ref(false);

// 计算属性：可见的菜单项（前7个）
const visibleMenuItems = computed(() => menuList.value.slice(0, 7));

// 计算属性：隐藏的菜单项（第8个及以后）
const hiddenMenuItems = computed(() => menuList.value.slice(7));

// 计算属性：是否有隐藏项
const hasHiddenItems = computed(() => hiddenMenuItems.value.length > 0);

// 手机端
// 计算属性：可见的菜单项（前4个）
const visibleMenuItemsWap = computed(() => menuList.value.slice(0, 3));

// 计算属性：隐藏的菜单项（第5个及以后）
const hiddenMenuItemsWap = computed(() => menuList.value.slice(3));

// 计算属性：是否有隐藏项
const hasHiddenItemsWap = computed(() => hiddenMenuItemsWap.value.length > 0);

// 菜单点击处理
const handleMenuClick = (item) => {

    emits('menuClick', item.key);



    Object.assign(themeStore.searcShow, {
        visible: searchPosition.value,
        txet: item.label,
        title: item.label
    });

    router.push({
        path: `/`,
        // query: { key: item.key, label: item.label }
    });



    // if (item.key === 'AImap') {
    //     router.push('/AImap');
    // } else {

    //     router.push({
    //         path: `/standardPath/`,
    //         query: { key: item.key, label: item.label }
    //     });
    // }
    showHiddenItems.value = false; // 点击后隐藏下拉菜单
};


// 手机端点击事件
const toggleHiddenItems = () => {
    showHiddenItems.value = !showHiddenItems.value;
},
    handleHiddenItemClick = (item) => {
        this.handleMenuClick(item);
        showHiddenItems.value = false; // 点击后关闭菜单
    }

</script>

<style lang="less" scoped>
.menu-container {
    display: flex;
    gap: 1.8vw;
    border-radius: 4px;
    position: relative;
    color: var(--color-text);


    .menu-item {
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        white-space: nowrap;
        font-size: 0.83vw;
        color: #999999;

    }

    .more-button {
        position: relative;
        cursor: pointer;
        font-size: 0.83vw;
        color: #999999;
        font-weight: 800;

        .hidden-menu-items {
            position: absolute;
            top: 100%;
            right: 0;

            border: 1px solid #ddd;
            border-radius: 4px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            z-index: 100;
            display: flex;
            flex-direction: column;
            min-width: 150px;
        }
    }
}

.menu-container-wap {
    flex: 1;
    display: flex;
    gap: 15px;
    font-size: 18px;
    position: relative;
    flex-wrap: wrap;

    .hidden-menu-items-wap {
        position: absolute;
        top: 100%;
        right: 0;
        background: white;
        padding: 10px;
        font-size: 18px;
        border-radius: 4px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        z-index: 100;
        display: flex;
        flex-direction: column;
        min-width: 150px;
        border: 1px solid #ddd;
    }
}
</style>